<template>
  <div>
    <u-cell-group :border="false">
      <cus-cell
        title="通知文字"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('text')
        "
      >
        <view class="u-slot-value">
          <u--input
            placeholder="请输入通知文字"
            border="surround"
            v-model="editConfigCom.attribute.text"
          ></u--input>
        </view>
      </cus-cell>
      <cus-cell title="模式" :border="false">
        <view
          class="u-slot-value"
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('mode')
          "
        >
          <u-radio-group
            v-model="editConfigCom.attribute.mode"
            style="flex-wrap: wrap"
            :activeColor="$theme.themeColor.primary"
          >
            <u-radio
              :customStyle="{ marginLeft: '8px', marginTop: '10px' }"
              v-for="(item, index) in typeOptions"
              :key="index"
              :label="item.name"
              :name="item.value"
              size="1rem"
            >
            </u-radio>
          </u-radio-group>
        </view>
      </cus-cell>
      <navigate-base-config
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('mode') &&
          editConfigCom.attribute.mode === 'link'
        "
      />
      <cus-cell
        title="字体大小"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('fontSize')
        "
      >
        <view class="u-slot-slider">
          <u-slider v-model="editConfigCom.attribute.fontSize" />
          <text>{{ editConfigCom.attribute.fontSize }}</text>
        </view>
      </cus-cell>
      <cus-cell title="字体颜色" :border="false">
        <view
          class="u-slot-color"
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('color')
          "
        >
          <!--            <u-button @click="open" type="primary">重置</u-button>-->
          <view @click="resetFontColor">重置</view>
          <view
            @click="open('colorPicker')"
            class="color-box"
            :style="{
              backgroundColor: editConfigCom.attribute.color,
            }"
          ></view>
        </view>
        <view class="color-picker">
          <view class="color-picker-container">
            <t-color-picker
              ref="colorPicker"
              :color="fontColor"
              @confirm="confirmFontColor"
            ></t-color-picker>
          </view>
        </view>
      </cus-cell>
      <cus-cell title="背景颜色" :border="false">
        <view
          class="u-slot-color"
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('bgColor')
          "
        >
          <view @click="resetBgColor">重置</view>
          <view
            @click="open('bgColorPicker')"
            class="color-box"
            :style="{
              backgroundColor: editConfigCom.attribute.bgColor,
            }"
          ></view>
        </view>
        <view class="color-picker">
          <view class="color-picker-container">
            <t-color-picker
              ref="bgColorPicker"
              :color="bgColor"
              @confirm="confirmBgColor"
            ></t-color-picker>
          </view>
        </view>
      </cus-cell>
    </u-cell-group>
  </div>
</template>

<script>
import tColorPicker from "@/components/t-color-picker/t-color-picker.vue";
import { NAVIGATE_TYPE } from "@/const/widget";
import { navigateTypeOptions } from "@/components/navigateConfig/config";
export default {
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  components: {
    tColorPicker,
  },
  data() {
    return {
      typeOptions: [
        {
          name: "空",
          value: "",
        },
        {
          name: "跳转",
          value: "link",
        },
        {
          name: "关闭",
          value: "closable",
        },
      ],
      navigateOptions: navigateTypeOptions,
      NAVIGATE_TYPE,
      fontColor: 0,
      bgColor: 0,
    };
  },
  created() {
    this.handleColor();
  },
  methods: {
    //----背景颜色选择器 start----
    //颜色处理
    handleColor() {
      const color = this.editConfigCom?.attribute?.color
        .replace("rgba", "")
        .replace("rgb", "")
        .replace("(", "")
        .replace(")", "")
        .split(",");
      const bgColor = this.editConfigCom?.attribute?.bgColor
        .replace("rgba", "")
        .replace("rgb", "")
        .replace("(", "")
        .replace(")", "")
        .split(",");
      const colorObject = Object.assign(
        {},
        {
          r: color[0] || 0,
          g: color[1] || 0,
          b: color[2] || 0,
          a: color[3] || 1,
        }
      );
      const bgColorObject = Object.assign(
        {},
        {
          r: bgColor[0] || 0,
          g: bgColor[1] || 0,
          b: bgColor[2] || 0,
          a: bgColor[3] || 1,
        }
      );
      this.fontColor = colorObject;
      this.bgColor = bgColorObject;
      this.originalFontColor = this.fontColor;
      this.originalBgColor = this.bgColor;
    },
    //字体颜色
    open(ref) {
      // 打开颜色选择器
      this.$refs[ref].open();
    },
    resetFontColor() {
      this.fontColor = this.originalFontColor;
      const rgba = this.originalFontColor;
      this.editConfigCom.attribute.color = `rgb(${rgba.r},${rgba.g},${rgba.b})`;
    },
    confirmFontColor(e) {
      const { rgba } = e;
      this.fontColor = rgba;
      this.editConfigCom.attribute.color = `rgb(${rgba.r},${rgba.g},${rgba.b})`;
    },
    resetBgColor() {
      this.bgColor = this.originalBgColor;
      const rgba = this.originalBgColor;
      this.editConfigCom.attribute.bgColor = `rgb(${rgba.r},${rgba.g},${rgba.b})`;
    },
    confirmBgColor(e) {
      const { rgba } = e;
      this.bgColor = rgba;
      this.editConfigCom.attribute.bgColor = `rgb(${rgba.r},${rgba.g},${rgba.b})`;
    },
    //----背景颜色选择器 end----
  },
};
</script>

<style scoped lang="scss">
.u-slot-color {
  display: flex;
  align-items: center;
  .color-box {
    margin-left: 10px;
    width: 100px;
    height: 35px;
    border: 1px solid lightgray;
  }
}
.color-picker {
  position: absolute;
  &-container {
    position: absolute;
    top: 20px;
    //left: -25px;
    z-index: 9999;
  }
}
.u-slot-slider {
  width: 100%;
  display: flex;
  align-items: center;
  .u-slider {
    flex: 1;
  }
}
</style>
